<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  User: zhouyanchao
  Date: 2017/10/25
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<base href="${BaseContext}">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jquery小练习</title>
	<jsp:include page="include_style.jsp"></jsp:include>
	<style>
		.tdBaground{
			background-color: yellow;
			font-size:20px;
		}
	</style>
</head>
<body>
<div class="am-container" style="margin-top: 50px;">

	<table class="am-table am-table-bordered" id="jqueryTable">

		<c:forEach begin="1" end="31" varStatus="i" step="1">
			<c:if test="${i.first || i.index%7==1}">
				<tr>
			</c:if>

			<td dateNum="${i.index}">${i.index}号</td>

			<c:if test="${i.last || i.index%7==0}">
				</tr>
			</c:if>

		</c:forEach>

	</table>
	<button type="button" class=" am-btn am-btn-primary" id="submitBtn">提交已选择的数据</button>

	<hr>

	<%--当月days(31)天，第一天是day(周日)--%>
	<c:set var="days" value="30"></c:set>
	<c:set var="day" value="3"></c:set>

	<table class="am-table am-table-bordered">
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
			<td>周四</td>
			<td>周五</td>
			<td>周六</td>
			<td>周日</td>
		</tr>

		<c:forEach begin="1" end="${days+day-1}" varStatus="i">
			<c:if test="${i.first || i.index%7==1}">
				<tr>
			</c:if>

			<c:if test="${i.index<day}">
				<td></td>
			</c:if>
			<c:if test="${i.index>=day}">
				<td>${i.index-(day-1)}号</td>
			</c:if>

			<c:if test="${i.last || i.index%7==0}">
				</tr>
			</c:if>

		</c:forEach>


	</table>

	<hr>
	<table class="am-table am-table-bordered">
		<tr>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
			<td>周四</td>
			<td>周五</td>
			<td>周六</td>
			<td>周日</td>
		</tr>


		<c:forEach begin="1" end="${days}" varStatus="i">

			<c:if test="${i.first || (i.index+(day-1))%7==1}">
				<tr>
			</c:if>

			<c:if test="${i.first}">
				<c:forEach begin="1" end="${day-1}">
					<td></td>
				</c:forEach>
			</c:if>

			<td dateNum="${i.index}">${i.index}号</td>

			<c:if test="${i.last || (i.index+(day-1))%7==0}">
				</tr>
			</c:if>


		</c:forEach>


	</table>

</div>

	<jsp:include page="include_script.jsp"></jsp:include>

	<script>
		$(function () {
			//遍历td
			$('#jqueryTable td').each(function (i) {
				//console.log(i);
//				var c = $(this).html();
//				console.log(c);

				//td添加click监听
				$(this).click(function () {

					console.log('当前点击：'+$(this).html());
/*

					if($(this).hasClass('tdBaground')){
						$(this).removeClass('tdBaground');
					}else{
						$(this).addClass("tdBaground");
					}
*/

					$(this).toggleClass('tdBaground');
				});
			});


			$('#submitBtn').click(function () {
				console.log("btn click");

				$('td.tdBaground').each(function (i) {
//					console.log($(this).html());

					console.log($(this).attr('dateNum'));

				});

			});

		});
	</script>

</body>
</html>
